<template>
    <div class="boxs">
        <el-card>


            <el-table border :data="moreArr" style="margin-top: 15px" v-loading="loading">
                <el-table-column label="index" align="center" width="60" type="index" />
                <el-table-column :label="$t('review.appName')" align="center" prop="shortName">
                    <template slot-scope="scope">
                        {{ scope.row.shortName }}
                    </template>
                </el-table-column>
                <el-table-column :label="$t('review.packageName')" align="center" prop="package_name" />


                <el-table-column :label="$t('feedback.operate')" align="center" width="420">
                    <template slot-scope="scope">
                        <el-button size="mini"
                            @click="handleEdit(scope.$index, scope.row)">{{ $t('feedback.Check') }}</el-button>
                        <el-button size="mini"
                            @click="handles(scope.$index, scope.row)">{{ $t('subscription.statistical') }}</el-button>
                        <el-button size="mini"
                            @click="handleWeeklyRates(scope.$index, scope.row)">{{ $t('subscription.WeeklyRates') }}</el-button>
                        <el-button size="mini"
                             
                            @click="handleEditTrial(scope.$index, scope.row)">{{ $t('subscription.uploadXLS') }}</el-button>
                        <!-- <el-button size="mini"
                            v-if="scope.row.pk == 'com.seamobitech.roku'"
                            @click="handleRefund(scope.$index, scope.row)">{{ $t('subscription.Refund') }}</el-button> -->
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.size"
                @pagination="getMore" />
        </el-card>
        <el-dialog :title="$t('review.operate')" :visible.sync="dialogVisible">
            <!-- <div class="grid-container">
                <div v-for="(day, index) in dayLabels" :key="index" class="grid-item">
                    <div class="date">{{ day.date }}</div>
                    <el-input-number style="max-width: 90px;padding: 0 6px;height: 28px;line-height: 28px;" size="small" v-model="day.count" :controls="false" @change="handleChange"
                        :min="0"></el-input-number>
                </div>
            </div> -->
            <div class="flex_ccenter">
                <el-upload class="upload-demo" accept=".xls,.xlsx,.csv" drag limit="1"
                    action="https://jsonplaceholder.typicode.com/posts/" multiple :http-request="uploadHandel"
                    :on-remove="remeveFile" ref="upload">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                        {{ $t('upload.uploadText') }}<em> {{ $t('upload.uploadText1') }}</em>
                    </div>
                </el-upload>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">{{ $t('tagsView.close') }}</el-button>
                <el-button type="warning" :loading="addLoading" @click="affirm">{{ $t('table.confirm') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { extractPackageNames, uploadExcel } from "@/api/subscription";
export default {
    name: "subscription",
    data() {
        return {
            queryParams: {
                page: 1,
                size: 10,
                dateRange: {
                    start: "",
                    end: "",
                },
                state: "",
                package_name: "",
                file: ''
            },
            total: 0,
            loading: false,
            moreArr: [],
            form: {
                pk: "",
            },
            search: "",
            dialogVisible: false,
            dayLabels: [
                {
                    "date": "2024-09-06",
                    "count": 66
                },
                {
                    "date": "2024-09-07",
                    "count": 383
                },
                {
                    "date": "2024-09-08",
                    "count": 496
                },

            ]
        };
    },
    created() {
        this.getMore();
    },
    methods: {
        async affirm() {
            let loading;
            if (!this.form.file) return
            try {
                let data = new FormData();
                data.append("file", this.form.file);
                data.append("pk", this.form.pk);
                loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });
                this.addLoading = true;
                await uploadExcel(data);
                this.addLoading = false;
                this.$message.success("操作成功");
                this.dialogVisible = false;
                this.form.file = "";
            } catch (e) {
                this.addLoading = false;
            } finally {
                this.form.file = "";
                loading.close();
                this.addLoading = false;
                if (this.$refs.upload) {
                    this.$refs.upload.clearFiles(); // 清除文件列表
                }
            }
        },
        uploadHandel(e) {
            this.form.file = e.file;
        },
        remeveFile() {
            this.form.file = "";
        },
        handleEditTrial(i, row) {
            this.form.pk =row.pk
            this.dialogVisible = true
        },
        
        handleRefund(index, row) {
            this.$router.push({
                path: "/subscription/refund",
                query: { pk: row.pk },
            });
        },
        async getMore() {
            this.loading = true;
            let { data, total } = await extractPackageNames();
            this.loading = false;
            this.moreArr = data;
            this.total = total;
        },

        handleEdit(index, row) {
            this.$router.push({
                path: "/subscription/notificationList",
                query: { pk: row.pk },
            });
        },
        handles(index, row) {
            this.$router.push({
                path: "/subscription/statistics",
                query: { pk: row.pk },
            });
        },
        handleWeeklyRates(index, row) {
            this.$router.push({
                path: "/subscription/weeklyRates",
                query: { pk: row.pk },
            });
        }
    },
};
</script>
<style lang="scss" scoped>
.boxs {
    padding: 20px;
}

::v-deep.el-input.is-disabled .el-input__inner {
    color: #333 !important;
}

::v-deep.el-textarea.is-disabled .el-textarea__inner {
    color: #333 !important;
}

::v-deep .el-image {
    margin-right: 8px;
    border-radius: 4px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    /* 自动调整列数 */
    gap: 10px;
    margin: 20px;
}

.grid-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.date {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 5px;
}

.count-input {
    width: 60px;
    margin: 0 auto;
    padding: 5px;
    font-size: 14px;
    text-align: center;
}

.save-container {
    grid-column: span 3;
    /* Save 按钮占据全宽 */
    text-align: center;
    margin-top: 20px;
}

.save-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.save-btn:hover {
    background-color: #45a049;
}
</style>